<template>
    <van-skeleton title avatar :row="25" :loading="loading">
    </van-skeleton>

    <div>
        <van-nav-bar class="top" :title=content left-text="" left-arrow @click-left="onClickLeft" />
        <van-form class="box" @submit="onSubmit">
            <div class="header">
                <img :src="logo" alt="">
                <p>马了丁大餐厅欢迎您</p>
            </div>
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
            <h3>
                <span>快速登录</span>
                <span class="reg" @click="goreg()">快速注册</span>
            </h3>
            <h4>
                <span>其他方式登录</span>
            </h4>
            <div class="foot">
                <img :src="img.img" alt="" v-for="img in imgs">
            </div>
            <!-- 底部条款 -->
            <div class="dibu">
                <!-- <input type="checkbox" class="inp" ref="box"> -->
                <p class="xieyi">
                    若您输入的手机号未注册，将为您直接注册，注册即视为同意
                    <font color="skyblue">用户注册协议、</font>
                    <font color="skyblue">用户隐私协议</font>
                </p>
            </div>
        </van-form>
    </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { sculptureGet } from '../api/home';
import { useUserStore } from '../store/user'
import { UserType } from '../types/zzy_types/user';
import { userLoginimg } from '../api/zzy'
const router = useRouter();
const user = useUserStore();

const loading = ref(true);

onMounted(() => {
    setTimeout(() => {
        loading.value = false;
    }, 1000)
});


const onSubmit = (value: UserType) => {

    // if (box.value.checked) {
    //     console.log(1);
    // }
    console.log("submit", value);
    user.userLoginAction(value).then(res => {
        router.push('./')

    })
    console.log(value.password);
}
const res = await sculptureGet()
const logo = res.data.results[2].img
const username = ref();
const password = ref();
const content = ref('高贵的SVIP客户登录');
const onClickLeft = () => {
    router.push('./')
}
const goreg = () => {
    router.push('./reg');
}
//渲染图标
const loginimg = await userLoginimg();
const imgs = loginimg.data.results;
console.log(loginimg.data.results);
//用户协议
const box = ref(null)
onMounted(() => {
    console.log(box.value);
})



</script>

<style lang="scss" scoped>
.box {
    .header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5rem;
        margin-bottom: 2rem;

        p {
            font-size: 20px;
            text-indent: 1em;
        }

        img {
            width: 100px;
            height: 150px;
            border-radius: 10px;
        }
    }

    h3 {
        display: flex;
        justify-content: space-between;
        padding: 0 4rem;
        color: rgb(153, 153, 153);
    }

    h4 {
        background: rgba(0, 0, 0, .2);
        width: 90%;
        height: 0.1rem;
        margin-left: 5%;
        margin-top: 10rem;
        position: relative;

        span {
            color: rgba(0, 0, 0, .2);
            padding: 0 4rem;
            margin: -1.5rem 20rem;
            position: absolute;
            background: #fff;
            width: 18rem;
        }
    }
}

.foot {
    display: flex;
    justify-content: center;

    img {
        width: 48px;
        height: 53px;
        padding: 10px 10px;
    }

}

.xieyi {
    font-size: 12px;
    text-align: center;
    width: 300px;
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 30px;
}

.inp {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 14px;
    margin-left: 30px;
}

.dibu {
    padding: 0 5rem;
    position: relative;
}
</style>